{#
/**
 * @file
 * banner
 *
 * See banner.wingsuit.yaml for documentation.
 */
#}
{# DEFAULTS #}

{% set position = position|default('center_center') %}
{% set image_position = image_position|default('center_center') %}

{# SETTINGS #}
{% set position_classes =  {
  'top_left': '',
  'top_center': 'text-center justify-center ',
  'top_right': 'text-right justify-end ',
  'center_left': 'items-center',
  'center_center': 'text-center items-center justify-center',
  'center_right': 'text-right items-center justify-end',
  'bottom_left': 'items-end',
  'bottom_center': 'text-center items-end justify-center',
  'bottom_right': 'text-right items-end justify-end',
} %}

{% set image_position_classes =  {
  'top_left': 'img-object-left-top',
  'top_center': 'img-object-top',
  'top_right': 'img-object-right-top',
  'center_left': 'img-object-left',
  'center_center': 'img-object-center',
  'center_right': 'img-object-right',
  'bottom_left': 'img-object-left-bottom',
  'bottom_center': 'img-object-bottom',
  'bottom_right': 'img-object-right-bottom',
} %}

{%
set height_classes = [
  'img-w-full img-h-full img-object-cover overflow-hidden',
  height == 'small' ? 'h-[300px] md:h-[300px]',
  height == 'default' ? 'h-[400px] md:h-[500px]',
  height == 'large' ? 'h-[600px] md:h-[800px]',
]|sort|join(' ')
%}
{% set teaser %}{{- teaser -}}{% endset %}

{# Template #}
<div{{ attributes|default(create_attribute()).addClass('relative') }}>
  <div{{ create_attribute().addClass(height_classes).addClass(image_position_classes[image_position]) }}>{{ image }}</div>
  <div class="absolute top-0 left-0 w-full h-full flex">
    {% embed "@organisms/container/container.twig" with {region_attributes: region_attributes, teaser: teaser, headline: headline, classes: 'flex-1 flex ' ~ position_classes[position]}  only %}
      {% block content %}
        <div class="p-6 dark:text-white">
          {% if teaser is not empty %}
            <div{{ region_attributes.teaser|default(create_attribute()).addClass('bg-white p-4') }}>
              {{ teaser }}
            </div>
          {% endif %}
        </div>
      {% endblock %}
    {% endembed %}
  </div>
</div>
